<template>
  <div class="main">
    <!-- 侧边导航 -->
    <div class="main-left">
      <div class="wrapper-left" ref="sider_scroll">
        <div class="sider-items">
          <div
            class="sider-item"
            @click="selectKey(item, index)"
            v-for="(item, index) in keys"
            :key="index"
            :class="{ select: index == select_id }"
          >
            <div>{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧主体 -->
    <div class="main-right">
      <div class="wrapper-right" ref="content_scroll">
        <div class="content-items">
          <!-- 轮播图 -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#333">
            <van-swipe-item v-for="(image, index) in images1" :key="index">
              <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
          <van-swipe
            initial-swipe="1"
            class="my-swipe"
            :autoplay="3000"
            indicator-color="#333"
          >
            <van-swipe-item v-for="(image, index) in images2" :key="index">
              <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
          <!-- 商品主体 -->
          <div
            class="content-groups"
            v-for="(item, index) in keys"
            :key="index"
          >
            <div v-if="commodityInfo[item].length != 0">
              <p class="group_name">{{ item }}</p>
              <ItemCard
                @toDetail="toDetail"
                :commodity="commodity"
                v-for="(commodity, index) in commodityInfo[item]"
                :key="index"
              ></ItemCard>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commodityApi from "@/api/commodity";

import Vue from "vue";
import { Swipe, SwipeItem, Lazyload } from "vant";

Vue.use(Swipe).use(SwipeItem).use(Lazyload);

import BScroll from "better-scroll";
import ItemCard from "@/components/commodity/ItemCard";
export default {
  name: "shopBar",
  components: {
    ItemCard,
  },
  data() {
    return {
      sider_scroll: null,
      content_scroll: null,
      commodityInfo: [],
      allCommodities: [],
      commodityGroup: [],
      keys: [],
      select_id: -1,
      images1: [
        require("@/assets/img/bg7.jpg"),
        require("@/assets/img/bg8.jpg"),
        require("@/assets/img/bg6.jpg"),
        require("@/assets/img/bg10.jpg"),
        require("@/assets/img/bg5.jpg"),
      ],
      images2: [
        require("@/assets/img/bg1.jpg"),
        require("@/assets/img/bg2.jpg"),
        require("@/assets/img/bg3.jpg"),
        require("@/assets/img/bg4.jpg"),
        require("@/assets/img/bg9.jpg"),
      ],
    };
  },
  methods: {
    // 初始化bs
    initSiderScroll() {
      this.sider_scroll = new BScroll(this.$refs.sider_scroll, {
        click: true,
        scrollY: true,
        bindToWrapper: true,
        probeType: 3,
        scrollbar: {
          fade: true,
        },
      });
      this.content_scroll = new BScroll(this.$refs.content_scroll, {
        click: true,
        scrollY: true,
        bindToWrapper: true,
        probeType: 3,
        scrollbar: {
          fade: true,
        },
      });
      this.commodityGroup = this.$refs.content_scroll.getElementsByClassName(
        "group_name"
      );
      // console.log("获取坐标位置：", 0 - this.commodityGroup[0].offsetTop);

      this.content_scroll.on("scroll", (position) => {
        for (var i = 0; i < this.commodityGroup.length; i++) {
          if (
            i < this.commodityGroup.length - 1 &&
            position.y < 0 - this.commodityGroup[i].offsetTop + 10 &&
            position.y > 0 - this.commodityGroup[i + 1].offsetTop + 10
          ) {
            this.select_id = i;
            // console.log("到达", i);
          } else if (
            position.y < 0 - this.commodityGroup[i].offsetTop + 10 &&
            i == this.commodityGroup.length - 1
          ) {
            this.select_id = i;
            // console.log("到达最后", i);
          }
        }
      });
    },
    //传递给子组件
    toDetail(commodity) {
      this.$emit("toDetail", commodity);
    },
    // console.log("点击侧边导航栏事件:", index);
    selectKey(item, index) {
      this.select_id = index;

      this.content_scroll.scrollToElement(this.commodityGroup[index], 250);
    },
    // 改变滚动条样式
    changeIndicator() {
      document.getElementsByClassName("bscroll-indicator")[0].style.background =
        "rgba(0, 0, 0, 0.2) none repeat scroll 0% 0%";
      document.getElementsByClassName(
        "bscroll-vertical-scrollbar"
      )[0].style.width = "0.15rem";
      document.getElementsByClassName("bscroll-indicator")[1].style.background =
        "rgba(0, 0, 0, 0.2) none repeat scroll 0% 0%";
      document.getElementsByClassName(
        "bscroll-vertical-scrollbar"
      )[1].style.width = "0.15rem";
    },
    // 获取商品信息
    getCommodityInfo() {
      commodityApi.getCommodityInfo().then((response) => {
        var data = response.data.data;
        // console.log(data);
        this.commodityInfo = data;
        this.keys = Object.keys(this.commodityInfo);
        this.keys.forEach((key) => {
          this.commodityInfo[key].forEach((commodity) => {
            this.allCommodities.push(commodity);
          });
        });
        this.$nextTick(() => {
          this.initSiderScroll();
          this.changeIndicator();
        });
      });
      // this.commodityInfo = {
      //   喜茶实验室: [
      //     {
      //       commodityName: "喜小瓶海盐柚子无糖气泡水",
      //       commodityDesc:
      //         "零糖零卡零脂，补充一日维C。全新口味，真实果汁添加。日本白柚蜜香和和柚子皮香自然平衡，犹如新鲜柚子鲜榨的口感，后段带有淡淡清新海盐味，清爽带汽。",
      //       characteristic: [
      //         "冰镇后更好喝",
      //         "本产品为海盐柚子无糖气泡水",
      //         "不参与糖代谢",
      //       ],
      //       price: "5.5",
      //       imgUrl: require("@/assets/img/commodity/xixiaoping.jpg"),
      //     },
      //   ],
      // };
    },
  },
  created() {
    this.getCommodityInfo();
  },
};
</script>

<style scoped>
.main {
  position: absolute;
  left: 0;
  right: 0;
  top: 4rem;
  bottom: 1.4rem;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
/* 左侧导航 */
.main-left {
  position: absolute;
  left: 0;
  width: 2.5rem;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  height: 100%;
  background-color: #f6f6f6;
}
.wrapper-left {
  height: 100%;
  width: 100%;
  background-color: #f6f6f6;
  overflow: hidden;
}
.sider-items {
  width: 100%;
  min-height: 3rem;
  padding-bottom: 3rem;
}
.sider-item {
  width: 1.8rem;
  min-height: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: grey;
  box-sizing: border-box;
  padding: 0 0.3rem;
  margin: 0.3rem 0.35rem;
  box-shadow: 4px 4px 10px #e1e1e1;
  border-radius: 10px;
  background-color: #fff;
}
.sider-item div {
  text-align: center;
}
.select {
  background-color: #fff;
  /* border-left: 5px solid #dba871; */
  border: 2px solid #dba871;
}
/* 右侧商品组 */
/* 轮播图 */
.my-swipe img {
  width: 95%;
  height: 4rem;
  margin-left: 2.5%;
}
::v-deep .van-swipe__indicators {
  bottom: 0.3rem;
}
::v-deep .van-swipe__indicator {
  background-color: gray;
  width: 0.2rem;
  height: 0.2rem;
}
/* 商品 */
.main-right {
  position: absolute;
  left: 2.5rem;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.wrapper-right {
  height: 100%;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
}
.content-items {
  width: 100%;
  min-height: 3rem;
  padding-bottom: 12rem;
}
.content-groups p {
  font-size: 12px;
  color: grey;
  margin-left: 2.5%;
}
</style>